<template>
  <view>
    <Line>
      <view class="disFlexCol gap-8 pb-20">
        <view class="disFlxAC gap-8">
          <text class="fz-14 linh-20 font-bold">
            {{ dayjs(data.followTime).format('YYYY-DD-MM') }}
          </text>
          <CustomTag
            :text="data.followMethod"
            background-color="#D0F7FF"
            color="#2878FF"
          ></CustomTag>
        </view>
        <view v-if="data.tenantId" class="disFlxAC gap-4">
          <text class="fz-12 linh-16" style="white-space: nowrap">
            {{ data.userName }}
          </text>
          <view
            v-if="data.memberLevelName"
            class="fz-12 linh-16 w-12 h-16 disFlxCC"
            style="color: #c8cacc"
          >
            丨
          </view>
          <text class="fz-12 linh-16" style="white-space: nowrap">
            {{ omitStr(data.memberLevelName, 5) }}
          </text>
          <view
            v-if="data.companyName"
            class="fz-12 linh-16 w-12 h-16 disFlxCC"
            style="color: #c8cacc"
          >
            丨
          </view>
          <text class="fz-12 linh-16 ov-1">{{ data.companyName }}</text>
        </view>
        <view v-else>
          <text class="fz-12 linh-16" style="white-space: nowrap">平台官方</text>
        </view>
        <view class="p-8 br-4" style="background-color: #f2f3f5">
          <view>
            <view class="fz-14 linh-20 mb-8" style="color: #969799">跟进内容：</view>
            <ExpandableText :text="data.followSummary!"></ExpandableText>
          </view>
          <view
            v-if="data.screenshotPathsList?.filter((item) => item)?.length"
            class="mt-8 disFlx gap-8 flex-wrap"
          >
            <TImage
              v-for="(screenshotPaths, i) in data.screenshotPathsList"
              :src="screenshotPaths"
              width="186rpx"
              height="186rpx"
              border-radius="8rpx"
              @click="handlePreviewImage(screenshotPaths)"
            ></TImage>
          </view>
          <view v-if="attachmentPath?.length" class="mt-8">
            <ContentAttachments :show-title="false" :list="attachmentPath"></ContentAttachments>
          </view>
        </view>
        <TButtonGroup
          v-if="sysUserId === data.sysUserId"
          position="inherit"
          :styles="{ padding: 0, paddingBottom: '32rpx' }"
        >
          <TButton
            text="删除记录"
            type="none"
            icon="&#xe621;"
            class="gutter-btn"
            @click="emits('del')"
            :customStyle="{
              backgroundColor: '#FFF',
              color: '#2878FF',
              border: '1px solid #2878FF',
            }"
            custom-class="h-32 linh-32 br-20"
          />
          <TButton
            text="编辑"
            type="none"
            icon="&#xe611;"
            class="gutter-btn"
            @click="emits('edit')"
            :customStyle="{
              backgroundColor: '#FFF',
              color: '#2878FF',
              border: '1px solid #2878FF',
            }"
            custom-class="h-32 linh-32 br-20"
          />
        </TButtonGroup>
      </view>
    </Line>
  </view>
</template>
<script setup lang="ts">
  import Line from './Line.vue';
  import CustomTag from '@/components/CustomTag/index.vue';
  import ExpandableText from './ExpandableText.vue';
  import ContentAttachments from '../../../components/ContentAttachments.vue';
  import { computed, ref, type PropType } from 'vue';
  import type { IFollowRecord } from '@/api/businessOpportunities/type';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { omitStr } from '@/utils/string';
  import TImage from '@/components/TImage/index.vue';
  import dayjs from 'dayjs';

  const useUser = useUserStoreWithOut();
  const sysUserId = computed(() => useUser.userInfo.sysUserId);
  const props = defineProps({
    data: {
      type: Object as PropType<IFollowRecord>,
      default: () => {},
    },
  });
  const emits = defineEmits(['del', 'edit']);

  const attachmentPath = computed(() => {
    return props.data.attachmentPathsList;
  });

  const handlePreviewImage = (screenshotPaths: string) => {
    uni.previewImage({
      current: screenshotPaths,
      urls: props.data.screenshotPathsList,
    });
  };
</script>
<style lang="scss" scoped></style>
